<template>
    <div class="container-xl">
        <div class="row bg-white header borshow">
            <header class="col" :style="{ padding: '48px' }">
                <div class="row">
                    <div class="col">
                        <div class="div2">{{ getactivity?.name }}</div>
                    </div>
                </div>
                <el-divider :style="{ margin: '24px auto' }"></el-divider>
                <div class="div1">题目数量：{{ question.length }}</div>
                <div class="div1">
                    涵盖题目知识点：
                    <el-button class="mb-1" type="primary" plain size="small" v-for="(vo, key) in label" :key="key"
                        v-text="vo"></el-button>
                </div>
            </header>
        </div>
        <div class="row min-height bg-white borshow">
            <div class="col m-p-6">
                <table class="table table-borderless table-hover table-striped">
                    <thead class="border-bottom thead">
                        <tr>
                            <td width="184" class="m-pl-6 m-border-2">题号</td>
                            <td width="184">题型</td>
                            <td scope="col">题目</td>
                            <td width="368" class="m-border-2 m-pr-6">知识点</td>
                        </tr>
                    </thead>
                    <tbody>
                        <router-link v-for="(v, k) in question" :key="k" :to="`/question/${v?.ID}?activityid=${ID}`
                            " custom v-slot="{ navigate }">
                            <tr @click="navigate" class="m-t-l-28">
                                <td class="text-x m-pl-6 m-border-2" v-text="v?.ID"></td>
                                <td class="text-x" v-text="v?.type"></td>
                                <td class="text-x" v-text="v?.name"></td>
                                <td class="m-border-2 m-pr-6">
                                    <div class="question-label">
                                        <el-button type="primary" plain size="small" v-for="(vo, key) in v?.questionlabel"
                                            :key="`${k}-${key}`"
                                            v-text="getlabel.find(e => e.ID === vo.labelid)?.name"></el-button>
                                    </div>
                                </td>
                            </tr>
                        </router-link>
                    </tbody>
                </table>
                <div class="text-center" v-if="!question?.length">目前没有添加题目</div>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { asyncgetactivity } from "../../../api";
import { ElMessage, dayjs } from "element-plus";
import { ref, onMounted, watch, computed } from 'vue'
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import { useRoute } from "vue-router";
import { uniq } from "underscore";
const prop = defineProps<{ ID?: number }>()

const getactivity = ref<Studycodemodel.Iactivity>()
onMounted(() => {
    start()
})

const route = useRoute()
const store = useStore(Storekey)
const getlabel = computed(() => {
    return store.state.label?.rows || []
})

const label = computed(() => {
    return uniq(question.value?.map(e => e?.questionlabel).map(e => e?.map(e => getlabel.value.find(t => t.ID === e.labelid)?.name)).flat().filter(e => e) || [])
})

const getuser = computed(() => {
    return store.state.user
})


const question = computed(() => {
    return store.state.question?.rows || []
})


watch(() => prop.ID, (v) => {
    if (v) start()
})

async function start() {
    if (prop.ID) {
        if (getuser.value) {
            try {
                const obj = await asyncgetactivity({ ID: prop.ID });
                getactivity.value = obj
                if (!obj.isshowactivityquestionbank && dayjs(obj.activityendtime).unix() < dayjs().unix()) {
                    await store.dispatch('actionquestion', {
                        activityid: prop.ID
                    })
                } else {
                    ElMessage.error('当前比赛题单禁止展示')
                }

            } catch (e) {
                ElMessage.error(e)
            }
        } else {
            ElMessage.error('请登录')
        }

    }
}




</script>
  
<style scoped>
.header {
    margin-top: 24px;
    margin-bottom: 24px;
    height: 415px;
    border-radius: 2px;
}

.div2 {
    color: #434343;
    font-weight: bold;
    font-size: 32px;
    font-style: normal;
}

.div1 {
    margin-top: 24px;
}

.text-x {
    cursor: pointer;
}

.div3 {
    margin-top: 48px;
    line-height: 42px;
    height: 48px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.span1 {
    display: inline-block;
    width: 208px;
    height: 42px;
    background: #f5f5f5;
    border-radius: 24px;
    text-align: center;
    margin-left: 35px;
    margin-right: 90px;
}

.span1 span {
    display: inline-block;
    width: 104px;
    height: 42px;
    border-radius: 24px;
    font-weight: bold;
    transition: all 0.3s;
    cursor: pointer;
}

.span2 {
    background: var(--color-cheng);
    color: #ffffff;
}

.el-tag {
    margin: 5px;
}

.m-pl-6 {
    padding-left: 24px !important;
}

.m-pr-6 {
    padding-right: 24px !important;
}

.copy {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    width: 200px;
    height: 48px;
    line-height: 48px;
    border-radius: 2px;
}

.copy:hover {
    color: var(--color-cheng);
}

.question-label {
    overflow: hidden;
    max-width: 368px;
    max-height: 48px;
}
</style>